<template>
	<!-- 滚动的提示信息 -->
	<view class="flex" v-if="isShow">
		<view class="tips">
		{{tipStr}}
		</view>
		<view class="iconfont icon-cha" @tap="hiddenTips"></view>
	</view>
</template>

<script>
	export default{
		props:{
			tipStr:{
				type:String,
				default:""
			}
		},
		data(){
			return{
				isShow:true
			}
		},
		methods:{
			hiddenTips(){
				this.isShow=false;
			}
		}
	}
</script>

<style>
	.flex{
		background-color: #FFD699;
		color: #CC7A00;
	}
	.tips{
		
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		animation-name: tips;
		animation-duration: 10s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		display: flex;
		align-items: center;
	}
	@keyframes tips{
		from{
			/* 让文字缩进。大于0则表示文字向右缩进，小于0则表示文字向左缩进 */
			text-indent: 750rpx; 
		}
		to{
			text-indent: -1050rpx;
		}
	}
	.flex::before{
		font-family: "iconfont" !important; //一定要设置font-family：“iconfont”不然字体无法出来
		content: "\e641"; //要是用Unicode格式，原生的是&#xe6e3而我们在content要把前面的&#x去掉，并加上一个\即可
		color: #CC7A00;
		padding: 0rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	} 
	
	.icon-cha{
		padding: 0rpx 10rpx;
	}


</style>
